<template>
  <el-input v-if="auth === 'edit'" v-model="historyTitle" :class="wrapperClass"
            :placeholder="placeholder" @click="openUserSelectModal" readonly/>

  <el-input v-else-if="auth === 'browse'" v-model="historyTitle" disabled/>

  <!--  <el-input v-else-if="auth === 'hide'" v-model="model" disabled-->
  <!--            type="password" :value="his"/>-->

  <el-text truncated v-else-if="auth === 'static'">
    {{ historyTitle }}
  </el-text>

  <UserSelectModal :multiple="false"
    :tabsConfig="[{name: 'depart'},{name: 'position'},{name: 'positionLevel'}]"
                   ref="refUserSelectorModal" @ok="userSelectChange"/>
</template>
<script setup>
import {computed, defineProps, shallowRef, unref} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {isEmpty, real} from '@/utils/CommonUtils';
import './textInput.css';
import UserSelectModal from '@/components/SingleUserSelector/UserSelectModal.vue';

const props = defineProps({
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const model = shallowRef();
const refUserSelectorModal = shallowRef();
const historyTitle = shallowRef();
const emits = defineEmits(['fieldValueChange']);

function openUserSelectModal() {
  let userList = getUserList();
  refUserSelectorModal.value.setData(userList);
}

function getUserList() {
  try {
    let ids = model.value.split(',');
    let realnames = historyTitle.value.split(',');
    let res = [];
    for (let i = 0; i < ids.length; i++) {
      res.push({
        id: ids[i],
        realname: realnames[i]
      });
    }
    return res;
  } catch (e) {
    return undefined;
  }
}

function getFieldValue(rowData) {
  rowData[`${real(props.field).tableFieldName}_dictText`] = real(historyTitle);
  return real(model);
}

function resetField() {
  model.value = undefined;
}

function setFieldValue(value, obj) {
  model.value = value;
  historyTitle.value = obj[`${real(props.field).tableFieldName}_dictText`];
}

function fieldValueChange() {
  emits('fieldValueChange', props.field);
}

function getFieldValueText() {
  return real(historyTitle);
}

function getFieldValueWithCheck(rowData) {
  if (props.notNull + '' === '1' && isEmpty(model.value)) {
    throw new Error('请将必填项填写完整');
  }
  rowData[`${real(props.field).tableFieldName}_dictText`] = real(historyTitle);
  return model.value;
}

function userSelectChange(userList) {
  if (isEmpty(userList)) {
    userList = [];
  }
  model.value = userList.map(u => u.id).toString();
  if (isEmpty(model.value)) {
    model.value = undefined;
  }
  historyTitle.value = userList.map(u => u.realname).toString();
  if (isEmpty(historyTitle.value)) {
    historyTitle.value = undefined;
  }
}

const placeholder = computed(() => {
  if (isEmpty(props.field.id)) return '';
  return `请输入${props.field.alias ? props.field.alias : props.field.showName}`;
});

const wrapperClass = computed(() => {
  return {
    notNull: props.notNull === '1' && isEmpty(model.value)
  };
});

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
